<template>
    <div>
        <JHB :jhb_info="jhb_info" :wakeupParam="callApp"></JHB>
        <div class="fixedTop" v-show="layerDisplay">
            <sharecarousel @change="getState" :wakeup-param="callApp"></sharecarousel>
        </div>
        <section ref="homePage">
            <div class="share-carousel-component-container">
                <div class="swiper-container" id="atlas_swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(groups,index) in rows">
                                    <img v-lazy="{src:groups.image + '?cmd=imageprocess/processtype/2/quality/100/width/600', loading:loadimg}" :class="'slide'+index" :alt="groups.note"/>
                        </div>
                    </div>
                    <!--<div :class='{"swiper-pagination": paginationshow}' :style='{"text-align": paginationdesition}'></div>-->
                </div>
            </div>
            <div class="ui-picture-extra-info" style="word-wrap: break-word;white-space : normal">
                <div class="details-down" @click="changeisshow()">
                    <img src="../../assets/libs/atic/images/details-up.png" v-if="!isshow" alt="">
                    <img src="../../assets/libs/atic/images/details-down.png" v-if="isshow" alt="">
                </div>
                <pre class="ui-single-summary ui-single-summary2" :class="{'mxhn':isshow}">{{describe}}</pre>
            </div>
        </section>
        <div id="wrapper" style="padding-top: 0;">
        <div class="mt10"></div>
        <div class="article-relevance">
            <div class="good"  @click="openAppatlas" v-if="contents.isgood!=0"><img src="../../assets/libs/atic/images/good_hand.png"/><span>{{contents.isgood}}赞</span></div>
        </div>

            <channel v-if="JSON.stringify(channelInfo)!=='{}'" :info="channelInfo"></channel>
            <remarknew  :topicid="topicid" :reportData="commentReportData" :onTop="onTop" :comtype="'commnet'"
                        @change3="getCounter" :isRealtime="isRealtime" :maxcount="2"></remarknew>
            <btn text="去「扬帆App」参与讨论" cate="btn-light" :wakeup-param="callApp" :counter="remarkNum"></btn>
        </div>
        <div class="yfh5-plugs_xin">
            <div id="relatedinfo">
                <div class="yfh5-plugs-name-goods" v-for="(item,index) in relaterow" :class="{'top_b_0':index==0}">
                    <a :href="item.content.detailShareUrl?item.content.detailShareUrl:item.content.modelurl">
                        <img class="img" src="../../assets/libs/atic/images/dian.png">
                        <div class="yfh5-plugs-name2">

                            {{item.content.title}}

                            <img v-if="item.type=='post'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_post_icon.png">
                            <img v-if="item.type=='vod'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_video_icon.png">
                            <img v-if="item.type=='programme'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_live_live.png">
                            <img v-if="item.type=='album'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_album_icon.png">
                            <img v-if="item.type=='special'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_special_icon.png">
                            <img v-if="item.type=='activity'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_event_icon.png">
                            <img v-if="item.type=='goods'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_buy_icon.png">
                            <img v-if="item.type=='audio'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_audio_icon.png">

                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import qs from "querystring"
    import '../../assets/libs/swiper/js/swiper.js'
    import "../../assets/libs/atic/common.css"
    import "../../assets/libs/atic/show.css"
    import "../../assets/libs/atic/style.new.css"

    export default {
        components: {
            JHB: function (resolve) {
                require(["../../components/jhb.vue"], resolve);
            },
            Sharecarousel: function (resolve) {
                require(["../../components/share_carousel.vue"], resolve);
            },
            Channel: function (resolve) {
                require(["../../components/channel.vue"], resolve);
            },
            Remarknew: function (resolve) {
                require(["../../components/remark_new.vue"], resolve)
            },
            Btn: function (resolve) {
                require(["../../components/btn.vue"], resolve)
            },
        },
        data:function () {
            return {
                loadimg:require("../../assets/images/op_0_zhanwei.png"),
                jhb_info:{
                    contentId:this.$route.params.atlasId,
                    contentType:23
                },
                rows:[],
                layerDisplay: {
                    type: Boolean,
                    default: true
                },
                contents:{
                    isgood:0,
                },
                callApp: {
                    contentType: 8,
                    contentParam:"",
                    infoParams:{
                        channelid:"",
                        channelname:"",
                        url:"",
                        type:"atlas"
                    },

                },
                describe:"",
                isshow:false,
                channelInfo:{},
                commentReportData: {

                },
                topicid:"",
                onTop: true,
                isRealtime:false,
                remarkNum:0,
                relaterow:[]
            }
        },
        mounted: function () {
            let that = this;
            this.axios.post(
                interbaseUrl + "setsail/external/externalService?service=getAtlasDetail",
                qs.stringify({
                    params: JSON.stringify({
                        atlasId: this.$route.params.atlasId
                    }),
                    apiVersion: process.env.VUE_APP_SERVER_VER
                })
            ).then((response) => {
                //404
                if (response.data.state == 2056){
                    window.location.href = "//"+window.location.host+"/yfs/Dnf";
                    return false;
                }
                that.$refs.homePage.style.height = document.documentElement.clientHeight+'px';
                that.rows=response.data.data.images;
                that.contents.isgood=response.data.data.praiseCount;
                that.describe="(1/"+response.data.data.images.length+") "+response.data.data.images[0].note;
                that.callApp.infoParams.channelid=response.data.data.channelId;
                that.callApp.infoParams.channelname=response.data.data.channelName;
                that.callApp.infoParams.url=response.data.data.modelUrl;
                that.topicid=response.data.data.topicid;
                if (response.data.data.channelId!="") {
                    this.axios.post(
                        interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                        qs.stringify({
                            "params": JSON.stringify({"channelId": response.data.data.channelId}),
                            "apiVersion": process.env.VUE_APP_SERVER_VER
                        })
                    ).then((response) => {
                        that.channelInfo = response.data.data;
                    });
                }
                // console.log("+++++++++++++++++++++++++++");
                // console.log(JSON.stringify(this.channelInfo, undefined, 2));
                // console.log("+++++++++++++++++++++++++++");
                // 修改页面信息
                let meta = {
                    title: !(response.data.state == 2056) ? response.data.data.shareTitle : "图集不存在",
                    content: !(response.data.state == 2056) ? response.data.data.shareContent : "图集不存在",
                    name: !(response.data.state == 2056) ? response.data.data.title : "图集不存在"
                };
                that.createMetaInfo(meta);
                that.freshTitles(!(response.data.state == 2056) ? response.data.data.shareTitle : "图集不存在");
                // 二次分享
                that.initShareConfig = initShareConf(
                    response.data.data.shareTitle,
                    response.data.data.shareContent,
                    response.data.data.shareImg,
                    window.location.href,
                    {
                        uid: "",
                        username: "",
                        opertime: that.toFullTime(),
                        imei: "",
                        openid: "",
                        ip: "",
                        channelid:  response.data.data.channelId,
                        contentid: that.$route.params.atlasId,
                        name: response.data.data.title,
                        contenttype: "information",
                        type: "atlas_1",
                        tagid: "",
                        extendtag: "",
                        sharetype: "weixin",
                        shareurl: window.location.href
                    }
                );


                function dolooknews() {
                    let actionType = "looknews";
                    let behaviorData = {
                        "uid": "",
                        "username": "",
                        "ip":"",
                        "contentid":that.$route.params.atlasId,
                        "imei": "",
                        "extendtag": "",
                        "type": "atlas_1",
                        "contenttype": "information",
                        "opertime": that.toFullTime(),
                        "contentname":response.data.data.title,
                        "channelid": response.data.data.channelId,
                        "sharetype": "",
                        "newsurl":response.data.data.shareUrl,
                    };
                    shareUrlReport(behaviorData, actionType);
                }
                dolooknews();

                // 评论comment行为
                that.commentReportData = {
                    uid: "",
                    username: "",
                    tagid: response.data.data.tagId,
                    contentid: that.$route.params.atlasId,
                    imei: "",
                    openid: "",
                    ip: "",
                    name: response.data.data.title,
                    extendtag: "",
                    type: "atlas_1",
                    contenttype: "information",
                    opertime:that.toFullTime(),
                    channelid: response.data.data.channelId
                };
            }).then(()=>{
                new Swiper("#atlas_swiper", {
                    effect: "slide",
                    preventClicks: false,
                    onSlideChangeEnd:function(swiper){
                        let page=swiper.activeIndex//切换结束时，告诉我现在是第几个slide
                        let size=that.rows.length;
                        that.describe="("+(page+1)+"/"+size+") "+that.rows[page].note;
                        that.isshow=false;
                    }
                },
                );

                let winh= document.documentElement.clientHeight-80;
                $("#atlas_swiper").height(winh);
                $("#atlas_swiper .swiper-slide").height(winh);

            })

            this.axios.post(
                interbaseUrl + "setsail/external/externalService?service=getAssociatedContentList",
                qs.stringify({
                    params: JSON.stringify({
                        id: "atlas_"+this.$route.params.atlasId,
                        idx: 0,
                        size: 6,
                        t:(new Date()).valueOf()
                    }),
                    apiVersion: process.env.VUE_APP_SERVER_VER
                })
            ).then((response) => {
                that.relaterow=response.data.data.rows;
            })
        },
        methods:{
            getState: function (bol) {
                this.layerDisplay = bol;
            },
            changeisshow:function(){
                this.isshow=!this.isshow;
            },
            openAppatlas:function(){
                openDownPage(8, this.callApp.contentParam,this.callApp.infoParams);
            },
            getCounter: function (val) {
                this.remarkNum = val;
            },
        }
    }
</script>

<style>
    section{
        display: block;
        background: #000;
        width: 100%;
        position: relative;
    }
.swiper-slide img{
    max-width: 100%;
    background: #000;
}
    #atlas_swiper{
        height:auto;
    }
    .ui-picture-extra-info{
        background-color: rgba(0,0,0,0.6);
        padding: 10px;
        position: absolute;
        bottom: 0;
        left:0;
        width: 100%;
        box-sizing: border-box;
        z-index: 99;
    }
    .details-down {
        text-align: center;
        margin-bottom: 10px;
    }
    .details-down img {
        width: 17px;
    }
    .ui-picture-extra-info .ui-single-summary{
        line-height: 18px;
        font-size: 14px;
        color: #fff;
        width: 100%;
        max-height: 54px;
        overflow: hidden;
        white-space: pre-wrap;
        word-wrap: break-word;
        margin: 1em 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    #atlas_swiper .swiper-wrapper{
    }
    #atlas_swiper .swiper-wrapper .swiper-slide{
        box-sizing: border-box;
        vertical-align: middle;
        text-align: center;
        display: flex;justify-content:center;align-items: center
    }
    #atlas_swiper .swiper-wrapper .swiper-slide img{
        max-height: 100%;
        vertical-align:middle;
    }
    .mxhn{
        max-height: none !important;
        display: block !important;
    }

    .article-relevance .good{
        height:16px;
    }
    .article-relevance .good span{
        line-height: 20px;
        display: block;
        float: left;
        top: 0;
        height: 16px;
        margin-left: 5px;
        font-size: 0.9rem;
        color:#666;
    }

    .article-relevance .good img{
        height: 16px;
        display: block;
        float: left;
        width: 16px;
    }
    .yfh5-plugs_xin  a{
        text-decoration: none;
        color:#444;
    }
    .article-relevance img{
        min-height: 10px;
        display:block;
        margin:0 auto;
        width:100%;
    }
    .article_pv {
        font-size: 12px;
        color: #999999;
        margin-left: 6px;
        vertical-align: middle;
    }
    .article-relevance .good{
        height:16px;
    }
    .article-relevance .good span{
        line-height: 20px;
        display: block;
        float: left;
        top: 0;
        height: 16px;
        margin-left: 5px;
        font-size: 0.9rem;
        color:#666;
    }

    .article-relevance .good img{
        height: 16px;
        display: block;
        float: left;
        width: 16px;
    }
    .top_b_0{
        border-top:0px solid #ededed !important;
    }
</style>